<template>
  <div class="wl-tree-select" :style="{ width: width + 'px' }">
    <!-- 选中框区 -->
    <el-popover
      placement="top-start"
      :width="400"
      :trigger="trigger"
      :disabled="disabled"
      transition="fade-in"
      v-model="options_show"
    >
      <el-input v-if="filterable" v-model="filterText" size="mini" placeholder="请输入关键词"></el-input>
      <el-scrollbar class="wl-treeselect-popover" ref="scrollbar" id="scrollbar">
        <template v-if="data && data.length > 0">
          <div class="container">
            <div class="item" v-for="(item,index) in data" :key="item.label || index" @click="itemClick(item)" :class="itemCls(item)">
              <div class="item-left">
                <div class="name">
                {{item.label}}
                </div>
                <span class="addr">
                  {{item.subLabel}}
                </span>
              </div>
              <div class="item-right" v-if="iconShow(item)">
                <i class="el-icon-check"></i>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <!-- <span>暂无数据...</span> -->
          <noData></noData>
        </template>
      </el-scrollbar>
      <!---->
      <div
        slot="reference"
        class="selected-box"
        :class="[{'wl-disabled': disabled}, sizeClass]"
      >
        <div class="tag-box" ref="tagBoxWrapper">
          <div v-show="selecteds.length > 0" class="tag-box-wrapper" >
            <template>
              <el-tag
                closable
                size="mini"
                class="wl-select-tag"
                v-for="item in cisShowselecteds"
                :title="item.label"
                :key="item.id"
                @close="tabClose(item)"
                ref="elTagItem"
                :style="{visibility:item.none?'hidden':'',position:item.none?'absolute':'relative'}"
              >{{ item.label }}</el-tag>

            </template>
          </div>
          <el-popover
            placement="top-start"
            title="已选人员"
            width="200"
            trigger="hover"
            >
             <div class="container" style="height:300px">
               <el-scrollbar style="height:100%">
                <div class="item" v-for="(item,index) in selecteds" :key="item.label || index" @click="itemClick(item)" :class="itemCls(item)">
                  <div class="item-left">
                    <div class="name">
                    {{item.label}}
                    </div>
                    <span class="addr">
                      {{item.value}}
                    </span>
                  </div>
                  <div class="item-right" v-if="iconShow(item)">
                    <i class="el-icon-check"></i>
                  </div>
                </div>
                </el-scrollbar>
            </div>
            <el-tag
                v-show="isShow"
                size="mini"
                class="wl-select-tag isShowNumber"
                ref="isShowNumber"
                slot="reference"
              >+{{ this.selecteds.length-1}}</el-tag>
          </el-popover>
          <p class="wl-placeholder-box" v-show="selecteds.length == 0">{{placeholder}}</p>
        </div>
        <div class="icon-box">
          <transition name="fade-rotate" mode="out-in">
            <i class="el-icon-arrow-down" v-if="!options_show" key="top"></i>
            <i class="el-icon-arrow-up" v-else key="btm"></i>
          </transition>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script>
import noData from "./noData";
export default {
  name: "wlTreeSelect",
  data () {
    return {
      selecteds: this.value || [], // 选中数据
      options_show: false, // 是否显示下拉选项
      data: [], // 展示的数据
      filterText: "", // 搜索的数据
      loading: false, // 数据加载状态
      isShow: false, // ELTAGNumber是否显示
      currentLength: 0 // 当前的后显示的数组下标
      // cisShowselecteds:[]
    };
  },
  components: {
    noData
  },
  props: {
    mutliple: { // 是否多选 默认单选
      type: Boolean,
      default: true
    },
    // 宽度
    width: String,
    // 触发方式 click/focus/hover/manual
    trigger: {
      type: String,
      default: "click"
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: "请选择"
    },
    size: {
      type: String,
      default: "mini"
    },
    // 是否使用搜索
    filterable: {
      type: Boolean,
      default: true
    },
    value: {
      type: [String, Array]

    }
  },
  methods: {
    getData() {
      return this.selecteds;
    },
    // tag标签关闭
    tabClose (item) {
      if (this.disabled) {
        return;
      }
      console.log(item);
      // this.selecteds = this.selecteds.filter(v => v.value !== item.value);
      let index = this.selecteds.findIndex(v => v.value === item.value);
      this.selecteds.splice(index, 1);
      console.log(this.selecteds);
    },
    // 清空数据
    clear () {
      this.selecteds = [];
    },
    // 关闭
    closeOptions () {
      this.options_show = false;
    },

    // 设置scrollData数据
    setScrollData(data) {
      this.data = data;
    },
    // 滚动事件
    handleScroll() {
      this.$nextTick(() => {
        let scrollbarEl = this.$refs.scrollbar.wrap;
        scrollbarEl.onscroll = () => {
          var sh = this.$refs.scrollbar.$refs.wrap.scrollHeight; // 滚动条高度
          var st = this.$refs.scrollbar.$refs.wrap.scrollTop; // 滚动条距离顶部的距离
          var ch = this.$refs.scrollbar.$refs.wrap.clientHeight; // 滚动条外容器的高度
          if (st + ch >= sh) {
            this.$emit("scrollBottom");
          }
        };

      });
    },
    // 设置滚动条顶部高度
    setScrollTop() {
      this.$refs.scrollbar.wrap.scrollTop = 0;
    },
    // 点击当前列
    itemClick(item) {

      if (this.mutliple) { // 如果是单选
        console.log("单选");
        if (this.selecteds.length > 0) {
          let isHave = this.selecteds.some(v => v.value === item.value);
          if (isHave) {
            let index = this.selecteds.findIndex(v => v.value === item.value);
            this.selecteds.splice(index, 1);
          } else {
            this.selecteds.pop();
            this.selecteds.push(item);
          }
        } else {
          this.selecteds.push(item);
        }
      } else { // 多选
        let isHave = this.selecteds.some(v => v.value === item.value);
        console.log("多选");
        if (isHave) {
          let index = this.selecteds.findIndex(v => v.value === item.value);
          this.selecteds.splice(index, 1);
        } else {
          this.selecteds.push(item);
        }

      }
      console.log(this.selecteds);
    },
    // 当前列的样式
    itemCls(item) {
      if (this.selecteds.length > 0) {
        let sId = this.selecteds.map(v => v.value);
        return {
          "active": sId.includes(item.value)
        };
      }

    },
    // 右侧小图标显示
    iconShow(item) {
      if (this.selecteds.length > 0) {
        let sId = this.selecteds.map(v => v.value);
        return sId.includes(item.value);
      }
      return false;

    },
    setData(data) {
      this.selecteds = data;
      console.log(this.selecteds);
    }
  },
  created () {
    console.log(this.select);
    if (Array.isArray(this.select) && this.select.length > 0) {
      this.selecteds = this.select;
    }
    // console.log("created");
  },
  watch: {
    filterText: {
      handler(nVal, oldVal) {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          if (nVal === oldVal) {
            return;
          }
          this.$emit("change", nVal);
        }, 800);
      },
      deep: true
    },
    selecteds(nVal) {
      let sum = 0;
      this.$nextTick(() => {
        const parentWidth = this.$refs.tagBoxWrapper.clientWidth;
        let children = this.$refs.elTagItem;
        if (!children) {
          return;
        }
        for (let i = 0; i < children.length;i++) {
          let el = children[i].$el;
          sum += el.offsetWidth;
        }
        if (sum >= parentWidth) {
          this.isShow = true;
          if (this.currentLength === 0) {
            this.currentLength = children.length - 1; // 记录当前的超过的未知
          }
          for (let i = this.currentLength;i <= this.selecteds.length - 1;i++) {
            this.$set(this.selecteds[i], "none", true);
          }
          for (let i = 0;i < this.currentLength;i++) {
            this.$set(this.selecteds[i], "none", false);
          }
        } else {
          this.isShow = false;
          this.currentLength = 0;
          for (let i = this.currentLength;i <= this.selecteds.length - 1;i++) {
            this.$set(this.selecteds[i], "none", false);
          }
        }
      });
    }
  },
  computed: {
    cisShowselecteds() {
      let data = this.selecteds;
      return data;
    },
    sizeClass () {
      let size_class = "size-medium";
      switch (this.size) {
        case "medium":
          size_class = "size-medium";
          break;
        case "small":
          size_class = "size-small";
          break;
        case "default":
          size_class = "size-default";
          break;
        case "mini":
          size_class = "size-mini";
          break;
        default:
          size_class = "size-medium";
          break;
      }
      return size_class;
    }
  },
  mounted () {
    this.handleScroll();
    // document.getElementById("scrollbar").addEventListener("scroll", this.handleScroll, true);
  }
};
</script>

<style lang="less">
p{
  margin:0 ;
  padding:0;
}
.wl-tree-select {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: middle;
  outline: none;

  .selected-box {
    display: flex;
    border: 1px solid #dcdfe6;
    // padding: 5px;
    width: 100%;
    // height: 35px;
    line-height: 34px;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    &:focus {
      // border-color: #409eff;
      .borderColor();
    }

    > .tag-box {
      display: inline-block;
      width: calc(100% - 20px);
      text-align: left;
      overflow: hidden;
      position: relative;
      .tag-box-wrapper {
        width: 150%;
        height: 100%;
        align-items: center;
        position: relative;
        display: flex;
        // > .wl-select-tag-text {
        //   flex: 1;
        //   width: 80%;
        //   float: left;
        //   position: relative;
        //   top: 5px;
        // }
      }
    }

    > .icon-box {
      float: right;
      display: flex;
      width: 20px;
      justify-content: center;
      align-items: Center;
      color: #c0c4cc;
    }
  }

  .selected-box.size-small {
    min-height: 32px;
    line-height: 30px;
  }
  .selected-box.size-mini {
    min-height: 28px;
    line-height: 26px;
  }
  .selected-box.size-default {
    min-height: 40px;
    line-height: 38px;
  }

  .no-wrap {
    height: 36px;
    > .tag-box {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .wl-disabled {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
    &:focus {
      border-color: #dcdfe6;
    }
    .el-tag__close {
      cursor: no-drop;
    }
  }

  .wl-select-tag {
    max-width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    vertical-align: middle;
    &.isShowNumber{
      position: absolute;
      right:0px;
      top: 2px;
    }
  }

  .wl-select-tag + .wl-select-tag {
    margin-left: 4px;
  }
}
.container{
    padding-top: 10px;
    .item{
      cursor: pointer;
      display: flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:5px;
      &.active{
        .name{
          // color: #409eff;
          .color()
        }
        .addr{
          .color()
        }
        .item-right{
          .color();
          font-size:16px;
        }
      }

    }
  }
   .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }
.wl-treeselect-popover {
  height: 360px;
  > .el-scrollbar__wrap {
    overflow-x: hidden;
  }

}

.wl-placeholder-box {
  color: #c0c4cc;
  margin: 0;
  font-size: 12px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

// 过度效果
.fade-in-enter-active,
.fade-in-leave-active {
  transition: all 0.4s;
}
.fade-in-enter, .fade-in-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-rotate-enter-active,
.fade-rotate-leave-active {
  transition: all 0.2s;
}
.fade-rotate-enter, .fade-rotate-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: rotateZ(45deg);
}
</style>
